import { useContext, useEffect, useRef } from 'react'
import type { FC, MutableRefObject, ReactNode } from 'react'
import classNames from 'classnames'
import styles from './index.module.scss'
import { Context } from './index'

interface IndexProps {
  children: ((e: MutableRefObject<any>) => React.ReactElement)
  hasNoAddBtn: boolean
}
const Index: FC<IndexProps> = ({ children, hasNoAddBtn }) => {
  const { setHeight, isOpen, heightRef } = useContext(Context)
  const ref = useRef<HTMLDivElement>(null)
  useEffect(() => {
    if (ref.current) {
      setTimeout(() => {
        const offsetHeight = ref.current?.offsetHeight

        if (offsetHeight !== 0 && heightRef.current !== offsetHeight) {
          setHeight?.(offsetHeight)
        }
      })
    }
  }, [children])
  return (<div className={classNames(styles.mainItemBody, { [styles.hidden]: !isOpen, [styles.hasNoAddBtn]: hasNoAddBtn })} >
    <div ref={ref} className={styles.inner}>
      {children(ref)}
    </div>
  </div>)
}

export default Index
